<template>
  <div class="app-container work-container">
    <h4>提交工单</h4>
    <el-steps :active="activeStatus" align-center>
      <el-step title="选择工单类型" icon="el-icon-tickets"/>
      <el-step title="创建工单" icon="el-icon-edit"/>
      <el-step title="完成" icon="el-icon-circle-check"/>
    </el-steps>
    <div v-if="!activeStatus && !activeItem" class="work-list">
      <ul>
        <li v-for="item in typeList" :key="item.id" :value="item.key"><i :class="item.icon" class="fa"/> {{ item.title }} <span class="work-order-btn" @click="selectType(item)">提工单</span></li>
      </ul>
    </div>
    <div v-if="activeStatus == 1" class="work-box">
      <div class="title">{{ activeItem.title }}</div>
      <el-form ref="dataForm" :model="temp" :rules="rules" label-position="right" label-width="140px" onsubmit="return onSubmit()" method="POST" action="" class="data-form">
        <div v-if="activeItem && activeItem.id !== 2" class="server-box">
          <el-form-item label="优先级" prop="ilevel">
            <el-radio-group v-model="temp.ilevel" class="filter-item">
              <el-radio v-for="item in appLevelOptions" :key="item.id" :label="item.key">{{ item.name }}</el-radio>
            </el-radio-group>
            <p v-if="temp.ilevel === 2" style="float:left;color:#f56c6c">紧急工单，请尽量详细描述工单，以减少沟通成本，不少于140个字符</p>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 1" label="服务器类型" prop="subType">
            <el-select v-model="temp.subType" class="filter-item" style="width:320px" placeholder="请选择类型">
              <el-option v-for="item in subTypeOptions" :key="item.id" :label="item.name" :value="item.key"/>
            </el-select>
          </el-form-item>

          <el-form-item label="工单描述" prop="description">
            <el-input ref="workDescription" :autosize="{ minRows:10, maxRows:20}" v-model="temp.description" type="textarea" class="filter-item" placeholder="请尽量详细描述工单，以减少沟通成本"/>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 1 && temp.subType == 0" label="选择镜像" prop="imageName">
            <el-select v-model="temp.imageName" class="filter-item" style="width:320px" placeholder="请选择镜像">
              <el-option v-for="(item, index) in mirrorOptions" :key="index" :label="item" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 1 && temp.subType == 0" label="应用环境" prop="env">
            <el-select v-model="temp.env" class="filter-item" style="width:320px" placeholder="请选择应用环境">
              <el-option v-for="(item, index) in appEnvOptions" :key="index" :label="item" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 1 && temp.subType == 0" label="主机标识" prop="hostName">
            <el-input v-model="temp.hostName" maxlength="150" class="filter-item" style="width:320px" placeholder="英文标识，一般为用途"/>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 1 && temp.subType == 0" label="使用到期日" prop="dueDateStr">
            <el-date-picker v-model="temp.dueDateStr" :picker-options="pickerOptions" type="date" value-format="yyyy-MM-dd" style="width:320px" class="filter-item" placeholder="到期后将会回收（最长5年）"/>
          </el-form-item>

          <el-form-item v-if="activeItem.id == 4 || activeItem.id == 5 || temp.subType !== 0" label="服务器IP" prop="hostIp">
            <el-input v-model="temp.hostIp" maxlength="300" class="filter-item" placeholder="多个IP以英文逗号分隔"/>
          </el-form-item>
        </div>

        <div v-if="activeItem && activeItem.id == 2" class="server-box">
          <el-form-item label="优先级" prop="ilevel">
            <el-radio-group v-model="temp.ilevel" class="filter-item">
              <el-radio v-for="item in appLevelOptions" :key="item.id" :label="item.key">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="自动化发布类型" prop="subType">
            <el-select v-model="temp.subType" class="filter-item" style="width:280px" placeholder="请选择类型" @change="changeSubType">
              <el-option v-for="(item, index) in publicOptions" :key="index" :label="item.name" :value="item.key"/>
            </el-select>
          </el-form-item>

          <el-form-item label="工单描述" prop="description">
            <el-input id="workDescription" :autosize="{ minRows:10, maxRows:20}" v-model="temp.description" :placeholder=" temp.subType == 0 ? '备注需要接入的机器和环境' : '请输入工单描述'" type="textarea" class="filter-item"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="应用名称" prop="appName">
            <el-input v-model="temp.appName" maxlength="100" class="filter-item" placeholder="请输入应用名称"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="应用分类" prop="btypeId">
            <el-select v-model="temp.btypeId" class="filter-item" style="width:280px" placeholder="请选择发布应用" clearable>
              <el-option v-for="item in classifyOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="应用类型" prop="systemType">
            <el-select v-model="temp.systemType" class="filter-item" style="width:280px" placeholder="请选择应用分类" clearable>
              <el-option v-for="(item, index) in appTypeOptions" :key="index" :label="item" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="应用级别" prop="vlevel">
            <el-select v-model="temp.vlevel" class="filter-item" style="width:280px" placeholder="请选择应用级别" clearable >
              <el-option v-for="(item, index) in levelOptions" :key="index" :label="item" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="git地址" prop="gitUrl">
            <el-input v-model="temp.gitUrl" maxlength="200" class="filter-item" placeholder="请填写git地址"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="应用描述" prop="remark">
            <el-input :autosize="{ minRows:4, maxRows:4}" v-model="temp.remark" type="textarea" class="filter-item" placeholder="描述这个应用是干什么用的"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="开发负责人" prop="ownerId">
            <el-select v-model="temp.ownerId" class="filter-item" style="width:280px" placeholder="请选择开发负责人" clearable filterable >
              <el-option v-for="item in devAppOptions" :key="item.id" :label="item.nickname" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 0" label="质量负责人" prop="qualityId">
            <el-select v-model="temp.qualityId" class="filter-item" style="width:280px" placeholder="请选择质量负责人" clearable filterable >
              <el-option v-for="item in devAppOptions" :key="item.id" :label="item.nickname" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="发布应用" prop="appId">
            <el-select v-model="temp.appId" class="filter-item" style="width:280px" placeholder="请选择发布应用" clearable filterable >
              <el-option v-for="item in bootAppOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == -1" label="发布应用" prop="appId">
            <el-select v-model="temp.appId" class="filter-item" style="width:280px" placeholder="请选择发布应用" clearable filterable >
              <el-option v-for="item in allAppOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="分组环境" prop="sfEnv">
            <el-select v-model="temp.sfEnv" class="filter-item" style="width:280px" placeholder="请选择分组环境" clearable filterable >
              <el-option v-for="(item, index) in sfEnvOptions" :key="index" :label="item" :value="item"/>
            </el-select>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="eureka地址" prop="eurekaUrl">
            <el-input v-model="temp.eurekaUrl" maxlength="150" class="filter-item" placeholder="如http://172.16.188.131:8080"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="应用端口号" prop="port">
            <el-input v-model="temp.port" maxlength="4" class="filter-item" placeholder="如8080"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="spring应用名" prop="applicationName">
            <el-input v-model="temp.applicationName" maxlength="100" class="filter-item" placeholder="即boot配置文件中的application.name,如cloud-console"/>
          </el-form-item>

          <el-form-item v-if="temp.subType == 1" label="下线等待时间(秒)" prop="waitTime">
            <el-input v-model="temp.waitTime" maxlength="8" class="filter-item" placeholder="即等待下线后应用进程的继续执行时间，如10"/>
          </el-form-item>
          <p v-if="temp.subType == 1" class="tips">注意：接入方需保证应用方注册的服务名是ip注册的（不能是hostname），且引入了健康检查组件</p>
        </div>
        <!--        <div class="server-box">-->
        <!--          <el-form-item label="上传文件">-->
        <!--            <div class="upload-file" @change="getFile($event)"> {{ fileName }}-->
        <!--              <input ref="uploadFile" type="file" name="file" >-->
        <!--            </div>-->
        <!--          </el-form-item>-->
        <!--        </div>-->
      </el-form>
      <div class="opt-box">
        <el-button :loading="postLoading" type="primary" @click="submitData($event)">{{ $t('table.submit') }}</el-button>
        <el-button :disabled="postLoading" @click="removeData">{{ $t('table.backToPrevious') }}</el-button>
      </div>
    </div>
    <div v-if="activeStatus > 2" class="status-box">
      <h3><i class="el-icon-success"/> 提交成功</h3>
      <p>您的工单已经成功提交，运维人员会火速给您处理，请耐心等待~</p>
      <div class="opt-box">
        <el-button type="primary" @click="removeData()">{{ $t('table.addWorkOrder') }}</el-button>
        <el-button @click="goWorkOrder">{{ $t('table.view') + $t('table.myWorkOrder') }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import 'font-awesome/css/font-awesome.min.css'
import {
  fetchAppEnvsList,
  fetchMirrorList,
  fetchAppClassifyList,
  fetchAppTypeList,
  fetchDevList,
  fetchAllAppList,
  fetchBootAppList
} from '@/api/worklist/workList'
import { generateSign } from '@/utils/signature'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import store from '@/store'

export default {
  name: 'Worklist',
  components: {
  },
  data() {
    // 验证IP
    var checkIP = (rule, value, callback, message) => {
      if (!value) {
        return callback()
      }
      var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/

      if (value.indexOf(',') === -1) {
        if (!reg.test(value)) {
          return callback(new Error(message))
        }
      } else {
        const ipList = value.split(',')

        for (let a = 0; a < ipList.length; a++) {
          if (!reg.test(ipList[a])) {
            return callback(new Error(message))
          }
        }
      }
      callback()
    }

    // 验证端口
    var checkPort = (rule, value, callback, message) => {
      if (!value) {
        return callback()
      }
      if (isNaN(value) || value > 65535 || value < 0) {
        return callback(new Error(message))
      }
      callback()
    }

    // 验证网址
    // var checkLink = (rule, value, callback, message) => {
    //   if (!value) {
    //     return callback()
    //   }
    //   var reg = /(http|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
    //   if (!reg.test(value)) {
    //     return callback(new Error(message))
    //   }
    //   callback()
    // }
    return {
      pickerOptions: {
        disabledDate(time) {
          const curDate = (new Date()).getTime()
          const year = 5 * (24 * 3600 * 1000) * 365 // 默认5年
          const fiveYears = curDate + year
          return time.getTime() < Date.now() || time.getTime() > fiveYears
        }
      },
      typeList: [
        // { id: 1, key: 0, title: '服务器', icon: 'fa-server' },
        // { id: 2, key: 1, title: '自动化平台', icon: 'fa-upload' },
        { id: 3, key: 2, title: '域名/权限申请/故障诊断', icon: 'fa-th-list' },
        { id: 4, key: 3, title: '修改配置', icon: 'fa-cogs' },
        { id: 5, key: 4, title: '应用部署', icon: 'fa-wrench' },
        // { id: 6, key: 5, title: '数据库', icon: 'fa-database' },
        { id: 7, key: -1, title: '其他', icon: 'fa-rocket' }
      ],
      appLevelOptions: [
        { id: 1, key: 0, name: '一般' },
        { id: 2, key: 1, name: '重要' },
        { id: 3, key: 2, name: '紧急' }
      ],
      subTypeOptions: [
        { id: 1, key: 0, name: '申请' },
        { id: 2, key: 1, name: '变更配置' },
        { id: 3, key: 2, name: '调整系统参数' },
        { id: 4, key: -1, name: '其他' }
      ],
      publicOptions: [
        { key: 0, name: '应用新接入发布' },
        { key: 1, name: 'Spring Cloud接入分组发布' },
        { key: -1, name: '其他' }
      ],
      levelOptions: ['A', 'B', 'C', 'D'], // 自动化发布 -- 应用等级
      sfEnvOptions: ['prod', 'pre'], // 自动化发布 -- 分组环境
      mirrorOptions: [], // 镜像
      appEnvOptions: [], // 应用环境
      classifyOptions: [], // 自动化发布 -- 应用分类
      appTypeOptions: [], // 自动化发布 -- 应用类型
      devAppOptions: [], // 自动化发布 -- 开发/质量人员列表
      allAppOptions: [], // 自动化发布 -- 其他 -- 全部应用列表
      bootAppOptions: [], // 自动化发布 -- spring Boot -- 全部应用列表
      fileName: '选择文件', // 上传文件
      dialogFormStatus: false,
      activeStatus: 0,
      activeItem: '',
      postUrl: process.env.BASE_API + '/workSheet/commit',
      postLoading: false,
      temp: {
        ilevel: 0, // 优先级
        subType: 0, // 子类
        description: '', // 工单描述
        imageName: '', // 镜像
        env: '', // 环境
        file: '', // 文件
        hostName: '', // 主机标识
        dueDateStr: '', // 到期日
        hostIp: '', // ip地址
        itype: '', // 工单类型
        appName: '', // 应用名称
        btypeId: '', // 应用分类Id
        systemType: '', // 系统类型
        vlevel: '', // 应用等级
        gitUrl: '', // git地址
        remark: '', // 应用描述
        ownerId: '', // 开发负责人ID
        qualityId: '', // 质量负责人ID
        sfEnv: '', // 分组环境
        appId: '', // 应用ID
        eurekaUrl: '', // eureka地址
        port: '', // 端口号
        applicationName: '', // spring应用名
        waitTime: 10 // 下线后等待时间（秒）
      },
      rules: {
        ilevel: [
          { required: true, message: '优先级是必选项', trigger: 'blur' }
        ],
        subType: [
          { required: true, message: '服务器类型是必选项', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '描述是必填项', trigger: 'blur' }
        ],
        imageName: [
          { required: true, message: '镜像是必选项', trigger: 'blur' }
        ],
        env: [{ required: true, message: '应用环境是必选项', trigger: 'blur' }],
        hostName: [
          { required: true, message: '主机标识是必填项', trigger: 'blur' }
        ],
        dueDateStr: [
          { required: true, message: '使用到期日是必填项', trigger: 'blur' }
        ],
        hostIp: [
          { required: true, message: '服务器IP是必填项', trigger: 'blur' },
          { validator: checkIP, required: false, message: '服务器IP不合法', trigger: 'blur' }
        ],
        appName: [
          { required: true, message: '应用名称是必填项', trigger: 'blur' }
        ],
        btypeId: [
          { required: true, message: '应用分类是必选项', trigger: 'blur' }
        ],
        systemType: [
          { required: true, message: '应用类型是必选项', trigger: 'blur' }
        ],
        vlevel: [
          { required: true, message: '应用级别是必选项', trigger: 'blur' }
        ],
        gitUrl: [
          { required: true, message: 'git地址是必填项', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '应用描述是必填项', trigger: 'blur' }
        ],
        ownerId: [
          { required: true, message: '开发负责人是必选项', trigger: 'blur' }
        ],
        qualityId: [
          { required: true, message: '质量负责人是必选项', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: '发布应用是必选项', trigger: 'blur' }
        ],
        sfEnv: [
          { required: true, message: '分组环境是必选项', trigger: 'blur' }
        ],
        eurekaUrl: [
          { required: true, message: '分组环境是必填项', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '应用端口是必填项', trigger: 'blur' },
          { validator: checkPort, required: false, message: '应用端口不合法', trigger: 'blur' }
        ],
        applicationName: [
          { required: true, message: 'spring应用名是必填项', trigger: 'blur' }
        ],
        waitTime: [
          { required: true, message: '下线等待时间是必填项', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取应用环境
    getAppEnvs() {
      fetchAppEnvsList().then(res => {
        this.appEnvOptions = res.data
      })
    },

    // 获取镜像选项
    getMirrorList() {
      fetchMirrorList().then(res => {
        this.mirrorOptions = res.data
      })
    },

    // 获取应用分类
    getAppClassifyList() {
      fetchAppClassifyList().then(res => {
        this.classifyOptions = res.data
      })
    },

    // 获取应用类型
    getAppTypeList() {
      fetchAppTypeList().then(res => {
        this.appTypeOptions = res.data
      })
    },

    // 获取开发/质量人员列表
    getDevList() {
      fetchDevList().then(res => {
        this.devAppOptions = res.data
      })
    },

    // 获取所有应用
    getAllAppList() {
      fetchAllAppList().then(res => {
        this.allAppOptions = res.data
      })
    },

    // 获取Spring Boot 应用列表
    getBootAppList() {
      fetchBootAppList().then(res => {
        this.bootAppOptions = res.data
      })
    },

    // 筛选工单类型
    selectType(item) {
      for (var p in this.temp) {
        if (p === 'ilevel' || p === 'subType') {
          this.temp[p] = 0
        } else {
          this.temp[p] = ''
        }
      }
      this.activeStatus = 1
      this.activeItem = item
      this.temp.itype = this.activeItem.key

      if (item.key === 0) {
        this.getAppEnvs()
        this.getMirrorList()
      } else if (item.key === 1) {
        this.getAppClassifyList()
        this.getAppTypeList()
        this.getDevList()
        this.getAllAppList()
        this.getBootAppList()
      } else if (item.key === 5) {
        this.activeStatus = 0
        this.activeItem = ''
        window.open('http://venus.mistong.com')
      }
    },
    changeSubType(value) {
      this.temp.appId = ''
    },
    onSubmit() {
      return false // 取消form表单的自动提交功能
    },
    // 文件大小
    readFileSize(file) {
      let size = file.size / 1024
      const aMultiples = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      let fileSizeString = ''
      for (let i = 0; size > 1; size /= 1024, i++) {
        fileSizeString = size.toFixed(2) + ' ' + aMultiples[i]
      }
      return fileSizeString
    },
    // 选择文件
    getFile(event) {
      this.fileName = event.target.files[0].name
      this.temp.file = event.target.files[0]
    },

    // 提交工单
    submitData(event) {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (this.temp.ilevel === 2 && this.temp.description.length < 140) {
            this.$alert('工单描述少于140个字符', '提示信息', {
              confirmButtonText: '我知道了'
            }).then(() => {
              this.$nextTick(() => {
                this.$refs['workDescription'].focus()
              })
            })
            return false
          }
          let tempWorkData = {}
          if (this.activeItem.key === 0) { // 服务器工单
            if (this.temp.subType === 0) {
              // 申请
              tempWorkData = {
                workServerApply: {
                  hostName: this.temp.hostName,
                  env: this.temp.env,
                  imageName: this.temp.imageName,
                  dueDateStr: this.temp.dueDateStr
                },
                ilevel: this.temp.ilevel,
                subType: this.temp.subType,
                description: this.temp.description,
                env: this.temp.env,
                itype: this.temp.itype
              }
            } else {
              tempWorkData = {
                workOpsCommon: {
                  hostIp: this.temp.hostIp
                },
                ilevel: this.temp.ilevel,
                subType: this.temp.subType,
                description: this.temp.description,
                itype: this.temp.itype
              }
            }
          } else if (this.activeItem.key === 1) { // 自动化平台工单
            if (this.temp.subType === 0) {
              tempWorkData = {
                workDeployAccess: {
                  appName: this.temp.appName,
                  systemType: this.temp.systemType,
                  btypeId: this.temp.btypeId,
                  vlevel: this.temp.vlevel,
                  gitUrl: this.temp.gitUrl,
                  remark: this.temp.remark,
                  ownerId: this.temp.ownerId,
                  qualityId: this.temp.qualityId
                },
                ilevel: this.temp.ilevel,
                subType: this.temp.subType,
                description: this.temp.description,
                itype: this.temp.itype
              }
            } else if (this.temp.subType === 1) {
              tempWorkData = {
                workBootGroupAccess: {
                  sfEnv: this.temp.sfEnv,
                  appId: this.temp.appId,
                  eurekaUrl: this.temp.eurekaUrl,
                  port: this.temp.port,
                  applicationName: this.temp.applicationName,
                  waitTime: this.temp.waitTime
                },
                ilevel: this.temp.ilevel,
                subType: this.temp.subType,
                description: this.temp.description,
                itype: this.temp.itype
              }
            } else {
              tempWorkData = {
                workDeployOther: {
                  appId: this.temp.appId
                },
                ilevel: this.temp.ilevel,
                subType: this.temp.subType,
                description: this.temp.description,
                itype: this.temp.itype
              }
            }
          } else if (this.activeItem.key === 2) {
            tempWorkData = {
              ilevel: this.temp.ilevel,
              description: this.temp.description,
              itype: this.temp.itype
            }
          } else if (this.activeItem.key === 3 || this.activeItem.key === 4) { // 修改配置 / 软件配置
            tempWorkData = {
              workOpsCommon: {
                hostIp: this.temp.hostIp
              },
              ilevel: this.temp.ilevel,
              description: this.temp.description,
              itype: this.temp.itype
            }
          } else if (this.activeItem.key === -1) {
            tempWorkData = {
              ilevel: this.temp.ilevel,
              description: this.temp.description,
              itype: this.temp.itype
            }
          }
          const formData = new FormData()
          for (const item in tempWorkData) {
            if (Object.prototype.toString.call(tempWorkData[item]) === '[object Object]') {
              const tempData = tempWorkData[item]
              for (const p in tempData) {
                formData.append(item + '.' + p, tempData[p])
              }
            } else {
              formData.append(item, tempWorkData[item])
            }
          }

          formData.append('file', this.temp.file)

          this.postLoading = true
          axios({
            url: this.postUrl,
            method: 'POST',
            data: formData,
            headers: {
              // "Content-Type": "multipart/form-data",
              'token': getToken(),
              'env': process.env.ENV_ROUTE,
              'appCode': process.env.APP_CODE,
              'sign': generateSign(process.env.KEY, process.env.APP_CODE)
            },
            timeout: 50000 // 5分钟
          }).then(res => {
            this.postLoading = false
            if (res.data.code === 1) {
              this.dialogFormStatus = false
              this.activeStatus = 3
              this.activeItem = ''
              this.temp.itype = ''
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              })
            } else {
              if (res.data.code === 118000014 || res.data.code === 118000015 || res.data.code === 118000016 ||
                res.data.code === 1000 || res.data.code === 9000 || res.data.code === 9001) {
                this.$alert('Token已经过期，请重新登录', '信息', {
                  confirmButtonText: '确定',
                  callback: action => {
                    store.dispatch('FedLogOut').then(() => {
                      location.reload() // 为了重新实例化vue-router对象 避免bug
                    })
                  }
                })
              } else {
                this.$alert(res.data.msg, '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                  }
                })
              }
            }
          }).catch(err => {
            console.log(err)
            this.postLoading = false
            this.$alert('工单提交失败', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          })
        }
      })
    },
    // 重置工单类型
    removeData() {
      this.activeStatus = 0
      this.activeItem = ''
    },
    goWorkOrder() {
      this.$router.replace('/worklist/myWorkList')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-form-item__error {
  margin-left: 20px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.work-container {
  padding:40px;
  .el-form-item__error {
    margin-left: 20px !important;
  }
  h4 {
    margin:0 0 40px;
  }
  h4:before {
    content: "";
    margin-right: 6px;
    border-left: 2px solid #2285e1;
  }
  .work-list ul {
    list-style: none;
    padding: 20px 0;
    li {
      position: relative;
      width: 48%;
      display: inline-block;
      line-height: 66px;
      text-align: left;
      padding-left: 30px;
      background-color: #f5f6fa;
      color: #303030;
      margin-bottom: 20px;
      margin-right: 4%;
      i {
        margin-right: 6px;
      }
      .work-order-btn {
        position: absolute;
        top:16px;
        right:20px;
        height: 32px;
        line-height:28px;
        padding:0 20px;
        display:inline-block;
        border: 2px solid #79b3f4;
        text-align:center;
        color: #3183de;
        font-size:13px;
        cursor: pointer;
      }
    }
    li:nth-child(2n) {
      margin-right: 0;
    }
  }
  .work-box {
    padding: 40px 0;
    & > .title {
      line-height: 44px;
      background: #f5f7fa;
      text-indent: 20px;
      margin-bottom: 20px;
    }
    .data-form {
      text-align: center;
      .server-box,
      .automatic-box {
        display: block;
        margin: 0 auto;
        width:600px;
        text-align: center;
      }
      .automatic-box {
        width: 100%;
      }
      .filter-item {
        text-align: left;
        float: left;
        margin-left: 20px;
      }
      .el-radio-group {
        padding-top: 10px;
      }
      .el-form-item__content {
        display: inline-block;
      }
      .tips {
        margin-top:20px;
        color:#F56C6C;
      }
    }
  }
  .opt-box {
    text-align: center;
    margin:60px auto;
  }
  .status-box {
    margin:10% auto;
    text-align:center;
    h3 {
      font-size:40px;
      color:#448ee1;
    }
    p {
      color:#848484;
    }
  }
  .upload-file {
    display: inline-block;
    position: absolute;
    left:20px;
    width:230px;
    line-height:30px;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding:3px 10px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    cursor: pointer;

    & > input {
      display: block;
      position: absolute;
      width: 230px;
      height:36px;
      left:0;
      top:0;
      opacity: 0;
      cursor: pointer;
    }
  }
  .upload-file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
    cursor: pointer;
  }
}
</style>
